<template>

  <view hover-class="gui-tap" @tap="gotoInfo(item)">

    <view class="gui-bg-white gui-border-radius gui-padding gui-flex gui-margin-top">

      <view>
        <image :src="baseUrl + item.image" mode="aspectFill" style="width: 180rpx;height: 180rpx;">
        </image>
      </view>
      <view class="gui-flex1" style="margin-left: 20rpx; width: 400rpx;">

        <view class="gui-h5 customView">
          {{item.productName}}
        </view>
        <view class="gui-flex" style="margin-top: 20rpx;  font-size: 12px; ">
          <!-- <text>近六月有655人咨询</text> -->
          <!-- <text class="gui-icons" style="color: #a2a2a2;">&#xe61c; 88.km</text> -->
          <text v-if="item.city" class="gui-icons" style="color: #a2a2<!-- a2;">{{item.city}}
            {{item.address}}</text>
          <text v-else class="gui-icons" style="color: #a2a2a2;">&nbsp;</text>
        </view>
        <view v-if="item.remark" class="gui-flex  gui-wrap" style="width: 100%; font-size: 12px; margin-top: 25rpx;">
          <view class="gui-border gui-border-radius "
            style="margin-right: 8rpx;  height: 30rpx; line-height: 30rpx; text-align: center; padding: 10rpx;">
            {{item.remark}}
          </view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        baseUrl: uni.gRequest.file,
      }
    },
    props: ["item"],
    // 组件应该使用vue的生命周期函数
    // onShow() {
    //   console.log('7897897item', this.item);
    // },
    // created() {
    // console.log('item', this.item);
    // },
    methods: {
      gotoInfo(x) {
        uni.navigateTo({
          url: '/pages/product/details?id=' + x.id
        });
      },
    }
  }
</script>

<style>
  .customView {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    width: 55%;
    text-overflow: ellipsis
  }
</style>
